<template>
  <el-form :model="models" :rules="rules" ref="qmGenForm" label-width="130px" class="qm-gen-form">
    <el-alert title type="warning" show-icon :closable="false">
      <h3 class="block" style="color: red; font-size: 20px;">IOS上架审核时，务必移除所有在线更新功能</h3>
      <h3 class="block" style="font-size: 16px;">IOS应用商店更新地址格式如[IOS平台发布必须以“打开下载地址”的方式]：</h3>
      <p
        style="font-size: 16px;"
      >“itms-apps://itunes.apple.com/cn/app/hello-h5+/id682211190?l=zh&mt=8”；以"itms-apps://"开头，后面跟appstore上应用地址。</p>
    </el-alert>

    <el-row style="margin-top: 20px;">
      <el-col :span="12">
        <el-form-item label="App应用：" prop="model.appId">
          <el-select v-model="models.model.appId" :disabled="pageAction != 'create'">
            <el-option value>请选择</el-option>
            <el-option
              v-for="item in controlData.apps"
              :value="item.appId"
              :label="item.appName"
              :key="item.appId"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="版本号：" prop="model.version">
          <el-input v-model="models.model.version" placeholder="按格式：a.b.c 填写，如1.0.2"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="系统：" prop="model.osName">
          <el-select v-model="models.model.osName">
            <el-option value>请选择</el-option>
            <el-option
              v-for="item in controlData.osTypeOptions"
              :key="item.value"
              :value="item.value"
              :label="item.key"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="更新方式：" prop="model.updateType">
          <el-select v-model="models.model.updateType">
            <el-option value>请选择</el-option>
            <el-option
              v-for="item in controlData.updateTypeOptions"
              :key="item.value"
              :value="item.value"
              :label="item.key"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="是否可跳过：" prop="model.isCancel">
          <el-switch v-model="models.model.isCancel"></el-switch>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="是否可取消：" prop="model.isAbort">
          <el-switch v-model="models.model.isAbort"></el-switch>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="标题：" prop="model.title">
          <el-input v-model="models.model.title"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="更新类型：" prop="model.updateOption">
          <el-select v-model="models.model.updateOption">
            <el-option value>请选择</el-option>
            <el-option
              v-for="item in controlData.updateOptions"
              :key="item.value"
              :value="item.value"
              :label="item.key"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-form-item label="下载地址：" prop="model.url">
          <el-input v-model="models.model.url">
            <template slot="append">
              <el-button class="file">
                上传安装包
                <input type="file" name="file" @change="getFile($event)" />
              </el-button>
            </template>
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-form-item label="更新说明：" prop="model.note">
          <el-input type="textarea" :rows="8" v-model="models.model.note"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import request from "@/utils/request";
export default {
  name: "mobile-mobileAppPublish-create",
  props: {
    models: Object,
    controlData: Object,
    pageAction: String,
  },
  data() {
    return {
      rules: {
        "model.appId": [
          {
            required: true,
            message: "这是必填字段",
            trigger: "blur",
          },
        ],
        "model.osName": [
          {
            required: true,
            message: "这是必填字段",
            trigger: "blur",
          },
        ],
        "model.version": [
          {
            required: true,
            message: "这是必填字段",
            trigger: "blur",
          },
        ],
        "model.updateType": [
          {
            required: true,
            message: "这是必填字段",
            trigger: "blur",
          },
        ],
        "model.title": [
          {
            required: true,
            message: "这是必填字段",
            trigger: "blur",
          },
        ],
        "model.note": [
          {
            required: true,
            message: "这是必填字段",
            trigger: "blur",
          },
        ],
        "model.url": [
          {
            required: true,
            message: "这是必填字段",
            trigger: "blur",
          },
        ],
        "model.isCancel": [
          {
            required: true,
            message: "这是必填字段",
            trigger: "blur",
          },
        ],
        "model.isAbort": [
          {
            required: true,
            message: "这是必填字段",
            trigger: "blur",
          },
        ],
        "model.updateOption": [
          {
            required: true,
            message: "这是必填字段",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    getFile(event) {
      let file = event.target.files[0];
      let idx = file.name.indexOf(".");
      let ext = file.name.substr(idx + 1);

      if (!["apk", "ipa"].includes(ext.toLowerCase())) {
        this.notifyError("请上传.apk 或 .ipa 格式的安装包");
        return;
      }
      this.upload(file, "App");
    },
    upload(file, type) {
      let formData = new FormData();
      formData.append("file", file);
      formData.append("dataKey", this.models.model.appId);
      formData.append("type", type);

      request({
        url: "/attachment/upload",
        method: "post",
        data: formData,
        header: { "Content-Type": "multipart/form-data" },
      })
        .then((r) => {
          if (r && r.attachmentId) {
            this.models.model.url =
              this.controlData.downloadUrlPrefix +
              "/attachment/down/" +
              r.attachmentId;
            this.notifySuccess("上传成功，请检查下载地址是否正确");
          } else {
            this.notifyError((r || {}).message || "服务器出现异常，请稍后再试");
          }
        })
        .catch((e) => {
          this.notifyError((e || {}).message || "服务器出现异常，请稍后再试");
        });
    },
  },
};
</script>

<style scoped>
.file {
  /* position: absolute;
  display: inline-block;
  background: #d0eeff;
  border: 1px solid #99d3f5;
  border-radius: 4px;
  padding: 4px 12px;
  overflow: hidden;
  color: #1e88c7;
  text-decoration: none;
  text-indent: 0;
  line-height: 20px; */
}
.file input {
  position: absolute;
  width: 100px;
  height: 30px;
  right: 0;
  top: 0;
  opacity: 0;
}
.file:hover {
  cursor: pointer !important;
  background: #aadffd;
  border-color: #78c3f3;
  color: #004974;
  text-decoration: none;
}
</style>